<template>
  <div class="designer-container">
    <!-- 顶部工具栏 -->
    <div class="top-toolbar">
      <div class="history-controls">
        <el-button size="small" @click="undo" :disabled="!canUndo">
          <el-icon><Back /></el-icon>
        </el-button>
        <el-button size="small" @click="redo" :disabled="!canRedo">
          <el-icon><Right /></el-icon>
        </el-button>
      </div>
      
      <div class="view-controls">
        <el-button size="small" @click="toggleGrid">
          <el-icon><Grid /></el-icon>
        </el-button>
        <el-button size="small" @click="toggleRulers">
          <el-icon><ScaleToOriginal /></el-icon>
        </el-button>
      </div>
      
      <div class="zoom-tools">
        <el-button size="small" @click="zoomOut">
          <el-icon><ZoomOut /></el-icon>
        </el-button>
        <div class="zoom-display">
          {{ Math.round(zoomLevel * 100) }}%
        </div>
        <el-button size="small" @click="zoomIn">
          <el-icon><ZoomIn /></el-icon>
        </el-button>
        <el-button size="small" @click="fitToView">
          <el-icon><FullScreen /></el-icon>
        </el-button>
        <el-button size="small" @click="resetZoom">
          <el-icon><Position /></el-icon>
        </el-button>
      </div>
    </div>
    
    <!-- 左侧工具栏 -->
    <div class="left-toolbar">
      <div class="toolbar-item" @click="activeAction = 'add'">
        <div class="tool-icon">
          <el-icon><Plus /></el-icon>
        </div>
        <div class="tool-name">添加</div>
      </div>
      
      <div class="toolbar-item" @click="activeAction = 'templates'">
        <div class="tool-icon">
          <el-icon><Document /></el-icon>
        </div>
        <div class="tool-name">模板</div>
      </div>
      
      <div class="toolbar-item" @click="activeAction = 'text'">
        <div class="tool-icon">
          <el-icon><EditPen /></el-icon>
        </div>
        <div class="tool-name">文字</div>
      </div>
      
      <div class="toolbar-item" @click="activeAction = 'material'">
        <div class="tool-icon">
          <el-icon><Picture /></el-icon>
        </div>
        <div class="tool-name">素材</div>
      </div>
      
      <div class="toolbar-item" @click="activeAction = 'user'">
        <div class="tool-icon">
          <el-icon><User /></el-icon>
        </div>
        <div class="tool-name">我的</div>
      </div>
      
      <div class="toolbar-item" @click="activeAction = 'batch'">
        <div class="tool-icon">
          <el-icon><Grid /></el-icon>
        </div>
        <div class="tool-name">批量</div>
      </div>

      <div class="toolbar-help">
        <el-icon><QuestionFilled /></el-icon>
      </div>
    </div>
    
    <!-- 主要设计区域 -->
    <div class="main-design-area">
      <!-- 顶部菜单 -->
      <div class="top-menu">
        <div class="login-prompt" v-if="!isLoggedIn">
          请先登录
        </div>
        <div class="user-info" v-else>
          {{ userInfo.name }}
        </div>
      </div>
      
      <!-- 水平标尺 -->
      <div class="horizontal-ruler" v-if="showRulers">
        <div class="ruler-markings">
          <div class="ruler-tick" v-for="i in Math.ceil(1500/50)" :key="'h-' + i" 
               :style="{left: (i * 50) + 'px'}">
            <div class="tick-label" v-if="i % 5 === 0">{{ i * 50 }}</div>
          </div>
        </div>
      </div>

      <!-- 垂直标尺 -->
      <div class="vertical-ruler" v-if="showRulers">
        <div class="ruler-markings">
          <div class="ruler-tick" v-for="i in Math.ceil(1000/50)" :key="'v-' + i" 
               :style="{top: (i * 50) + 'px'}">
            <div class="tick-label" v-if="i % 5 === 0">{{ i * 50 }}</div>
          </div>
        </div>
      </div>
      
      <!-- 画布区域 -->
      <div class="canvas-area">
        <div class="canvas-wrapper" ref="canvasWrapper">
          <canvas ref="fabricCanvas" class="design-canvas"></canvas>
          
          <!-- 辅助线和标尺 -->
          <div class="ruler-horizontal"></div>
          <div class="ruler-vertical"></div>
          
          <!-- 缩放控制 -->
          <div class="zoom-controls">
            <div class="zoom-level">
              {{ currentPage }}/{{ totalPages }}
              <el-icon class="ml-1"><ArrowDown /></el-icon>
            </div>
            <div class="zoom-buttons">
              <el-button size="small" circle @click="zoomIn">
                <el-icon><ZoomIn /></el-icon>
              </el-button>
              <el-button size="small" circle @click="zoomOut">
                <el-icon><ZoomOut /></el-icon>
              </el-button>
              <el-button size="small" @click="selectTool">
                选择
              </el-button>
              <el-button size="small" @click="fitToView">
                <el-icon><FullScreen /></el-icon>
              </el-button>
              <el-button size="small" @click="resetZoom">
                <el-icon><Position /></el-icon>
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 右侧属性面板 -->
    <div class="right-panel">
      <div class="panel-header">
        <h3>{{ getPanelTitle() }}</h3>
      </div>
      
      <!-- 图层面板 -->
      <div class="layers-panel" v-if="activeAction === 'layers'">
        <div class="layers-header">
          <h4>图层</h4>
          <div class="layer-controls">
            <el-button size="small" type="text" @click="addLayer">
              <el-icon><Plus /></el-icon>
            </el-button>
            <el-button size="small" type="text" @click="duplicateLayer" :disabled="!selectedLayer">
              <el-icon><CopyDocument /></el-icon>
            </el-button>
            <el-button size="small" type="text" @click="deleteLayer" :disabled="!selectedLayer || layers.length <= 1">
              <el-icon><Delete /></el-icon>
            </el-button>
          </div>
        </div>
        
        <div class="layers-list">
          <div 
            v-for="layer in layers" 
            :key="layer.id" 
            class="layer-item"
            :class="{active: selectedLayer && selectedLayer.id === layer.id}"
            @click="selectLayer(layer)"
          >
            <div class="layer-visibility">
              <el-checkbox v-model="layer.visible" @change="toggleLayerVisibility(layer)" />
            </div>
            <div class="layer-name">
              {{ layer.name }}
            </div>
            <div class="layer-lock">
              <el-button size="small" type="text" @click.stop="toggleLayerLock(layer)">
                <el-icon v-if="layer.locked"><Lock /></el-icon>
                <el-icon v-else><Unlock /></el-icon>
              </el-button>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 尺寸设置 -->
      <div class="panel-section">
        <h4>尺寸</h4>
        <div class="size-controls">
          <div class="size-field">
            <label>宽度</label>
            <el-input
              v-model="canvasWidth"
              type="number"
              size="small"
              @change="updateCanvasSize"
            >
              <template #append>px</template>
            </el-input>
          </div>
          <div class="size-field">
            <label>高度</label>
            <el-input
              v-model="canvasHeight"
              type="number"
              size="small"
              @change="updateCanvasSize"
            >
              <template #append>px</template>
            </el-input>
          </div>
        </div>
      </div>
      
      <!-- 颜色设置 -->
      <div class="panel-section">
        <h4>颜色</h4>
        <div class="color-selector">
          <div class="color-preview" :style="{ backgroundColor: selectedColor }"></div>
          <input type="color" v-model="selectedColor" @change="updateSelectedColor" class="color-input">
        </div>
        
        <div class="color-palette">
          <div 
            v-for="color in colorPalette" 
            :key="color" 
            class="color-swatch"
            :style="{ backgroundColor: color }"
            @click="selectedColor = color; updateSelectedColor()"
          ></div>
        </div>
      </div>
      
      <!-- 配色方案 -->
      <div class="panel-section">
        <h4>配色</h4>
        <div class="color-schemes">
          <div class="color-scheme-row">
            <div 
              v-for="scheme in colorSchemes.slice(0, 6)" 
              :key="scheme.id" 
              class="color-scheme-swatch"
              :style="{ backgroundColor: scheme.color }"
              @click="applyColorScheme(scheme)"
            ></div>
          </div>
          <div class="color-scheme-row">
            <div 
              v-for="scheme in colorSchemes.slice(6, 12)" 
              :key="scheme.id" 
              class="color-scheme-swatch"
              :style="{ backgroundColor: scheme.color }"
              @click="applyColorScheme(scheme)"
            ></div>
          </div>
          <div class="color-scheme-row">
            <div 
              v-for="scheme in colorSchemes.slice(12, 18)" 
              :key="scheme.id" 
              class="color-scheme-swatch"
              :style="{ backgroundColor: scheme.color }"
              @click="applyColorScheme(scheme)"
            ></div>
          </div>
        </div>
      </div>
      
      <div class="panel-footer">
        <div class="icp-info">京ICP备20220334</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed, reactive } from 'vue';
// 正确导入fabric.js
import { Canvas, Pattern, Rect, Circle, Triangle, IText, Line } from 'fabric';
import { 
  Plus, Document, EditPen, Picture, User, Grid, QuestionFilled,
  ZoomIn, ZoomOut, FullScreen, ArrowDown, Back, Right, ScaleToOriginal,
  Position, CopyDocument, Delete, Lock, Unlock
} from '@element-plus/icons-vue';

// 登录状态
const isLoggedIn = ref(false);
const userInfo = ref({ name: 'User' });

// 设计画布
const fabricCanvas = ref(null);
const canvasWrapper = ref(null);
let canvas = null;

// 画布尺寸
const canvasWidth = ref(1242);
const canvasHeight = ref(1860);

// 当前工具状态
const activeAction = ref('add');
const selectedColor = ref('#FFFFFF');
const selectedObject = ref(null);
const zoomLevel = ref(1);
const currentPage = ref(1);
const totalPages = ref(1);

// 撤销和重做状态
const historyStates = ref([]);
const currentStateIndex = ref(-1);
const canUndo = computed(() => currentStateIndex.value > 0);
const canRedo = computed(() => currentStateIndex.value < historyStates.value.length - 1);

// 标尺和网格状态
const showRulers = ref(true);
const showGrid = ref(true);

// 图层状态
const layers = ref([]);
const selectedLayer = ref(null);

// 颜色面板
const colorPalette = [
  '#5D3A7A', '#C8284B', '#F26D32', '#F0DB4E', '#A6DDD7', '#DEF0A6', '#FBDB67', '#F79999',
  '#84D7E1', '#92DCF0', '#CCF5FA', '#A6DDD7', '#13BBA4', '#2C78C5', '#423F84', '#A1DAD7',
  '#F8D7C7', '#FCBAB1', '#FA8E8E', '#FFCFA3', '#D7EBB5', '#A6DDD7'
];

// 配色方案
const colorSchemes = [
  { id: 1, color: '#5D3A7A' },
  { id: 2, color: '#C8284B' },
  { id: 3, color: '#F26D32' },
  { id: 4, color: '#F0DB4E' },
  { id: 5, color: '#A6DDD7' },
  { id: 6, color: '#DEF0A6' },
  { id: 7, color: '#FBDB67' },
  { id: 8, color: '#F79999' },
  { id: 9, color: '#84D7E1' },
  { id: 10, color: '#92DCF0' },
  { id: 11, color: '#CCF5FA' },
  { id: 12, color: '#A6DDD7' },
  { id: 13, color: '#F8D7C7' },
  { id: 14, color: '#FCBAB1' },
  { id: 15, color: '#FA8E8E' },
  { id: 16, color: '#FFCFA3' },
  { id: 17, color: '#D7EBB5' },
  { id: 18, color: '#A6DDD7' }
];

// 初始化画布
onMounted(() => {
  initCanvas();
  initLayers();
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
  if (canvas) {
    canvas.dispose();
  }
  window.removeEventListener('resize', handleResize);
});

function initCanvas() {
  canvas = new Canvas(fabricCanvas.value, {
    width: canvasWidth.value,
    height: canvasHeight.value,
    backgroundColor: '#ffffff',
    preserveObjectStacking: true
  });
  
  // 监听选择事件
  canvas.on('selection:created', handleObjectSelected);
  canvas.on('selection:updated', handleObjectSelected);
  canvas.on('selection:cleared', handleSelectionCleared);
  
  // 监听对象修改事件
  canvas.on('object:modified', saveCanvasState);
  canvas.on('object:added', saveCanvasState);
  canvas.on('object:removed', saveCanvasState);
  
  // 默认网格背景
  createCheckerboardBackground();
  setupGrid();
  
  // 适应容器大小
  handleResize();
  
  // 保存初始状态
  saveCanvasState();
}

// 初始化图层
function initLayers() {
  // 创建默认图层
  addLayer('Background Layer');
}

function createCheckerboardBackground() {
  // 实现透明棋盘背景
  const patternCanvas = document.createElement('canvas');
  const patternContext = patternCanvas.getContext('2d');
  
  patternCanvas.width = 20;
  patternCanvas.height = 20;
  
  patternContext.fillStyle = '#f0f0f0';
  patternContext.fillRect(0, 0, 10, 10);
  patternContext.fillRect(10, 10, 10, 10);
  
  patternContext.fillStyle = '#e0e0e0';
  patternContext.fillRect(10, 0, 10, 10);
  patternContext.fillRect(0, 10, 10, 10);
  
  const backgroundPattern = new Pattern({
    source: patternCanvas,
    repeat: 'repeat'
  });
  
  canvas.setBackgroundColor(backgroundPattern, canvas.renderAll.bind(canvas));
}

function handleResize() {
  if (!canvas || !canvasWrapper.value) return;
  
  const containerWidth = canvasWrapper.value.clientWidth;
  const containerHeight = canvasWrapper.value.clientHeight;
  
  // 计算适合的缩放比例
  const scaleX = (containerWidth - 40) / canvasWidth.value;
  const scaleY = (containerHeight - 40) / canvasHeight.value;
  zoomLevel.value = Math.min(scaleX, scaleY);
  console.log("=================zoomLevel.value",zoomLevel.value)
  // 设置画布缩放和居中
  canvas.setZoom(zoomLevel.value);
  canvas.setWidth(canvasWidth.value * zoomLevel.value);
  canvas.setHeight(canvasHeight.value * zoomLevel.value);
  
  // 重新渲染
  canvas.renderAll();
}

// 更新画布尺寸
function updateCanvasSize() {
  if (!canvas) return;
  
  canvas.setWidth(canvasWidth.value);
  canvas.setHeight(canvasHeight.value);
  
  // 重新调整缩放以适应容器
  handleResize();
}

// 对象选择处理
function handleObjectSelected(e) {
  selectedObject.value = canvas.getActiveObject();
}

function handleSelectionCleared() {
  selectedObject.value = null;
}

// 设置网格
function setupGrid() {
  if (!canvas) return;
  
  if (showGrid.value) {
    const gridSize = 50;
    const gridLineWidth = 1;
    const gridColor = 'rgba(200, 200, 200, 0.4)';
    
    // 创建水平线
    for (let i = 1; i < canvasHeight.value / gridSize; i++) {
      const line = new Line([
        0, i * gridSize, canvasWidth.value, i * gridSize
      ], {
        stroke: gridColor,
        strokeWidth: gridLineWidth,
        selectable: false,
        evented: false,
        excludeFromExport: true,
        name: 'grid-line'
      });
      canvas.add(line);
    }
    
    // 创建垂直线
    for (let i = 1; i < canvasWidth.value / gridSize; i++) {
      const line = new Line([
        i * gridSize, 0, i * gridSize, canvasHeight.value
      ], {
        stroke: gridColor,
        strokeWidth: gridLineWidth,
        selectable: false,
        evented: false,
        excludeFromExport: true,
        name: 'grid-line'
      });
      canvas.add(line);
    }
  }
}

// 切换网格显示
function toggleGrid() {
  showGrid.value = !showGrid.value;
  
  // 删除现有网格线
  const gridLines = canvas.getObjects().filter(obj => obj.name === 'grid-line');
  gridLines.forEach(line => canvas.remove(line));
  
  if (showGrid.value) {
    setupGrid();
  }
  
  canvas.renderAll();
}

// 切换标尺显示
function toggleRulers() {
  showRulers.value = !showRulers.value;
}

// 撤销
function undo() {
  if (currentStateIndex.value > 0) {
    currentStateIndex.value--;
    loadCanvasState(historyStates.value[currentStateIndex.value]);
  }
}

// 重做
function redo() {
  if (currentStateIndex.value < historyStates.value.length - 1) {
    currentStateIndex.value++;
    loadCanvasState(historyStates.value[currentStateIndex.value]);
  }
}

// 保存画布状态
function saveCanvasState() {
  if (!canvas) return;
  
  // 删除当前状态之后的所有状态
  if (currentStateIndex.value < historyStates.value.length - 1) {
    historyStates.value = historyStates.value.slice(0, currentStateIndex.value + 1);
  }
  
  // 将当前状态保存到历史记录
  const json = canvas.toJSON(['name', 'locked', 'layerId']);
  historyStates.value.push(json);
  currentStateIndex.value = historyStates.value.length - 1;
  
  // 限制历史记录数量
  if (historyStates.value.length > 30) {
    historyStates.value.shift();
    currentStateIndex.value--;
  }
}

// 加载画布状态
function loadCanvasState(state) {
  if (!canvas || !state) return;
  
  canvas.clear();
  canvas.loadFromJSON(state, canvas.renderAll.bind(canvas));
}

// 图层操作
function addLayer(name = 'New Layer') {
  const layer = {
    id: Date.now().toString(),
    name: name,
    visible: true,
    locked: false,
    objects: []
  };
  
  layers.value.push(layer);
  selectedLayer.value = layer;
  return layer;
}

function duplicateLayer() {
  if (!selectedLayer.value) return;
  
  const newLayer = {
    id: Date.now().toString(),
    name: `${selectedLayer.value.name} Copy`,
    visible: selectedLayer.value.visible,
    locked: selectedLayer.value.locked,
    objects: []
  };
  
  // 复制当前图层的对象
  const layerObjects = canvas.getObjects().filter(obj => obj.layerId === selectedLayer.value.id);
  layerObjects.forEach(obj => {
    obj.clone(cloned => {
      cloned.set('layerId', newLayer.id);
      canvas.add(cloned);
      newLayer.objects.push(cloned);
    });
  });
  
  layers.value.push(newLayer);
  selectedLayer.value = newLayer;
  saveCanvasState();
}

function deleteLayer() {
  if (!selectedLayer.value || layers.value.length <= 1) return;
  
  // 删除图层上的所有对象
  const layerObjects = canvas.getObjects().filter(obj => obj.layerId === selectedLayer.value.id);
  layerObjects.forEach(obj => canvas.remove(obj));
  
  // 移除图层
  const index = layers.value.findIndex(l => l.id === selectedLayer.value.id);
  layers.value.splice(index, 1);
  
  // 选择新的图层
  if (layers.value.length > 0) {
    selectedLayer.value = layers.value[Math.min(index, layers.value.length - 1)];
  } else {
    selectedLayer.value = null;
  }
  
  saveCanvasState();
}

function selectLayer(layer) {
  selectedLayer.value = layer;
  
  // 选中该图层上的对象
  canvas.discardActiveObject();
  const layerObjects = canvas.getObjects().filter(obj => obj.layerId === layer.id);
  
  // 使用不同的选择方式记录图层
  if (layerObjects.length === 1) {
    canvas.setActiveObject(layerObjects[0]);
  } else if (layerObjects.length > 1) {
    const selection = new fabric.ActiveSelection(layerObjects, { canvas });
    canvas.setActiveObject(selection);
  }
  
  canvas.renderAll();
}

function toggleLayerVisibility(layer) {
  const layerObjects = canvas.getObjects().filter(obj => obj.layerId === layer.id);
  layerObjects.forEach(obj => {
    obj.visible = layer.visible;
  });
  canvas.renderAll();
}

function toggleLayerLock(layer) {
  layer.locked = !layer.locked;
  
  const layerObjects = canvas.getObjects().filter(obj => obj.layerId === layer.id);
  layerObjects.forEach(obj => {
    obj.locked = layer.locked;
    obj.selectable = !layer.locked;
    obj.evented = !layer.locked;
  });
  
  canvas.renderAll();
}

// 颜色更新
function updateSelectedColor() {
  if (selectedObject.value) {
    selectedObject.value.set('fill', selectedColor.value);
    canvas.renderAll();
    saveCanvasState();
  }
}

// 应用配色方案
function applyColorScheme(scheme) {
  selectedColor.value = scheme.color;
  if (selectedObject.value) {
    selectedObject.value.set('fill', scheme.color);
    canvas.renderAll();
    saveCanvasState();
  }
}

// 缩放控制
function zoomIn() {
  zoomLevel.value = Math.min(zoomLevel.value * 1, 5);
  canvas.setZoom(zoomLevel.value);
  canvas.renderAll();
}

function zoomOut() {
  zoomLevel.value = Math.max(zoomLevel.value / 1, 0.1);
  canvas.setZoom(zoomLevel.value);
  canvas.renderAll();
}

// 缩放到合适大小
function fitToView() {
  if (!canvas || !canvasWrapper.value) return;
  
  const containerWidth = canvasWrapper.value.clientWidth;
  const containerHeight = canvasWrapper.value.clientHeight;
  
  // 计算适合的缩放比例
  const scaleX = (containerWidth - 40) / canvasWidth.value;
  const scaleY = (containerHeight - 40) / canvasHeight.value;
  zoomLevel.value = Math.min(scaleX, scaleY);
   console.log("2=================zoomLevel.value",zoomLevel.value)
 
  canvas.setZoom(zoomLevel.value);
  canvas.setWidth(canvasWidth.value * zoomLevel.value);
  canvas.setHeight(canvasHeight.value * zoomLevel.value);
  
  canvas.renderAll();
}

// 重置到原始大小
function resetZoom() {
  zoomLevel.value = 1;
  canvas.setZoom(zoomLevel.value);
  canvas.setWidth(canvasWidth.value);
  canvas.setHeight(canvasHeight.value);
  
  canvas.renderAll();
}

// 选择工具
function selectTool() {
  canvas.isDrawingMode = false;
  canvas.selection = true;
}

// 获取面板标题
function getPanelTitle() {
  switch (activeAction.value) {
    case 'add': return '添加元素';
    case 'templates': return '选择模板';
    case 'text': return '文本编辑';
    case 'material': return '素材库';
    case 'user': return '我的设计';
    case 'batch': return '批量编辑';
    default: return '属性设置';
  }
}
</script>

<style scoped>
.designer-container {
  display: flex;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

/* 左侧工具栏 */
.left-toolbar {
  display: flex;
  flex-direction: column;
  width: 80px;
  background-color: #ffffff;
  border-right: 1px solid #e0e0e0;
  align-items: center;
  padding: 15px 0;
}

.toolbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 15px 0;
  cursor: pointer;
}

.toolbar-item:hover {
  background-color: #f5f5f5;
}

.tool-icon {
  font-size: 24px;
  color: #333;
}

.tool-name {
  margin-top: 4px;
  font-size: 12px;
  color: #666;
}

.toolbar-help {
  margin-top: auto;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #f5f5f5;
  color: #999;
  cursor: pointer;
}

/* 主设计区域 */
.main-design-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #f0f0f0;
}

.top-menu {
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
}

.login-prompt {
  font-size: 14px;
  color: #666;
}

.canvas-area {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
}

.canvas-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.design-canvas {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.ruler-horizontal {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 20px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #e0e0e0;
}

.ruler-vertical {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 20px;
  background-color: #f5f5f5;
  border-right: 1px solid #e0e0e0;
}

.zoom-controls {
  position: absolute;
  bottom: 20px;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border-radius: 4px;
  padding: 5px 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.zoom-level {
  display: flex;
  align-items: center;
  margin-right: 15px;
  font-size: 14px;
  color: #666;
  cursor: pointer;
}

.zoom-buttons {
  display: flex;
  align-items: center;
  gap: 5px;
}

.full-screen-btn {
  margin-left: 5px;
}

/* 右侧属性面板 */
.right-panel {
  width: 300px;
  background-color: #ffffff;
  border-left: 1px solid #e0e0e0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.panel-header {
  padding: 15px 20px;
  border-bottom: 1px solid #e0e0e0;
}

.panel-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.panel-section {
  padding: 15px 20px;
  border-bottom: 1px solid #f0f0f0;
}

.panel-section h4 {
  margin: 0 0 15px 0;
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.size-controls {
  display: flex;
  gap: 15px;
}

.size-field {
  flex: 1;
}

.size-field label {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  color: #666;
}

.color-selector {
  position: relative;
  margin-bottom: 15px;
}

.color-preview {
  width: 100%;
  height: 36px;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
  cursor: pointer;
}

.color-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.color-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.color-swatch {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid #e0e0e0;
}

.color-schemes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.color-scheme-row {
  display: flex;
  gap: 8px;
}

.color-scheme-swatch {
  width: 36px;
  height: 24px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid #e0e0e0;
}

.panel-footer {
  margin-top: auto;
  padding: 10px;
  text-align: right;
  border-top: 1px solid #e0e0e0;
}

.icp-info {
  font-size: 12px;
  color: #999;
}
</style>